<!--
 * @Author: ljb
 * @Description: 
 * @Date: 2021-09-23 23:21:02
 * @LastEditTime: 2021-09-24 15:37:53
 * @FilePath: \blog-vue\src\components\blog\blog-content-item.vue
-->
<template>
    <div class="blog-content-item">
        <h3 class="blog-item--title">测试的文章</h3>
        <p class="blog-item--date">
            <el-icon>
                <clock />
            </el-icon>
            2021年09月19日 17:30:40
        </p>
        <p class="blog-item--author">用户111</p>
        <img class="blog-item--illu" :src="illuImg" title="图片" />
        <p class="blog-item--desc">111111111111222222222222bbbbbbbbbbbbb...</p>
        <p class="blog-item--tags">
            <span class="blog-tag blog-tag--hit">浏览(6)</span>
            <span class="blog-tag blog-tag--like">浏览(6)</span>
            <span class="blog-tag blog-tag--comment">浏览(6)</span>
        </p>
    </div>
</template>

<script>
import illuImg from '@/assets/imgs/illu.jpeg'

export default {
    name: 'BlogContentItem',
    data() {
        return {
            illuImg
        }
    },
    setup() {
        
    },
}
</script>

<style lang="scss" scoped>
    .blog-content-item {
        padding: 12px;
        background-color: #fff;
        margin-bottom: 8px;
        border-radius: 8px;
        text-align: center;
        .blog-item--title {
            color: #555;
            font-size: 24px;
        }
        .blog-item--date {
            padding: 16px 0;
        }
        .blog-item--illu {
            height: 220px;
            padding: 8px 0;
        }
        .blog-item--desc {
            padding: 24px;
            text-align: left;
            text-indent: 2em;
        }
        .blog-item--tags {
            display: flex;
            flex-direction: row-reverse;
            padding: 0 16px;
            .blog-tag {
                padding: 0 8px;
                color: #bbb;
            }
        }
    }
</style>